import React from 'react';
import ReactMarkdown from 'react-markdown';

const MessageBubble = ({ isUser, content, timestamp, isLoading, isStreaming }) => {
  // 格式化时间戳
  const formattedTime = timestamp ? new Date(timestamp).toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit'
  }) : '';

  return (
    <div className={`flex mb-6 ${isUser ? 'justify-end' : 'justify-start'}`}>
      {/* AI头像 - 仅在非用户消息时显示 */}
      {!isUser && (
        <div className="flex-shrink-0 mr-4">
          <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center overflow-hidden">
            <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6 text-blue-600">
              <path d="M16 5.33a4.67 4.67 0 100 9.34 4.67 4.67 0 000-9.34zM10.4 21.33a5.6 5.6 0 00-5.6 5.6v.94h22.4v-.94a5.6 5.6 0 00-5.6-5.6H10.4z" fill="currentColor" />
            </svg>
          </div>
        </div>
      )}

      {/* 消息内容 */}
      <div className={`flex flex-col max-w-3/4 ${isUser ? 'items-end' : 'items-start'}`}>
        {/* 用户名/AI名称 */}
        <div className="text-sm font-medium mb-1">
          {isUser ? '用户' : 'Qwen2.5-Omni-7B'}
        </div>

        {/* 消息气泡 */}
        <div className={`rounded-lg px-4 py-3 ${isUser ? 'bg-blue-50' : 'bg-gray-50'}`}>
          {isLoading ? (
            <div className="flex space-x-1">
              <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
              <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce delay-100"></div>
              <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce delay-200"></div>
            </div>
          ) : (
            <div className="prose prose-sm max-w-none">
              <ReactMarkdown>
                {content || ''}
              </ReactMarkdown>
              {isStreaming && (
                <span className="inline-block w-1 h-4 bg-blue-500 ml-1 animate-blink"></span>
              )}
            </div>
          )}
        </div>

        {/* 操作按钮 - 仅在非空消息且非加载状态时显示 */}
        {!isLoading && content && (
          <div className="flex mt-2 space-x-2">
            <button className="text-gray-500 hover:text-blue-600 p-1">
              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
              </svg>
            </button>

            <button className="text-gray-500 hover:text-blue-600 p-1">
              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
              </svg>
            </button>

            {!isUser && (
              <>
                <button className="text-gray-500 hover:text-blue-600 p-1">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905a3.61 3.61 0 01-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5" />
                  </svg>
                </button>

                <button className="text-gray-500 hover:text-blue-600 p-1">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904a3.61 3.61 0 01.608-2.006L17 13v-5m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5" />
                  </svg>
                </button>
              </>
            )}
          </div>
        )}
      </div>

      {/* 用户头像 - 仅在用户消息时显示 */}
      {isUser && (
        <div className="flex-shrink-0 ml-4">
          <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">
            B
          </div>
        </div>
      )}
    </div>
  );
};

export default MessageBubble;